<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>html基础标签</title>
    </head>
    <body>
        <!--标题标签: 总共六种，有文字加粗效果，数字越大，字号越大-->
        <h1>1号标题</h1>
        <h2>2号标题</h2>
        <h3>3号标题</h3>
        <h4>4号标题</h4>
        <h5>5号标题</h5>
        <h6>6号标题</h6>

        <!--段落标签：独占一行，段落之间存在间隙-->
        <p>段落</p>

        <!--换行标签-->
        <br>

        <!--水平线：hr: 一条水平横线，上下空一行-->
        <hr>
        <!--
            文本格式化标签：
                1. strong: 效果：加粗，简写标签，效果一致：b
                2. em：效果：倾斜，简写标签，效果一致：i
                3. ins：效果：下划线，简写标签，效果一致：u
                4. del：效果：删除线，简写标签，效果一致：s
        -->
        <strong>加粗</strong>
        <em>倾斜</em>
        <ins>下划线</ins>
        <del>删除线</del>

        <b>简写：加粗</b>
        <i>简写：倾斜</i>
        <u>简写：下划线</u>
        <s>简写：删除线</s>

        <!--图像标签: 相对路径写法-->
        <img src="./materials/images/1.jpg" alt="图片无法显示，显示的文本" title="鼠标悬浮在图片时，显示的文本" width="500px" height="500px">
        <!--图像标签: 因为webstorm是通过localhost:端口号形式访问，所以这种写法不知道该怎么说-->
        <img src="/html/day01/materials/cat.jpg" alt="图片无法显示，显示的文本" title="鼠标悬浮在图片时，显示的文本" width="500px" height="500px">
        <br>
        <!--超链接标签：
                href: 跳转链接, 填写 “#” 表示是空链接，没有跳转的必要
                target: _blank, 表示打开新的窗口跳转页面
                -->
        <a href="https://www.baidu.com" target="_blank">跳转到百度</a>
        <!--
            在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词
            音频标签：
                src: 音频地址
                controls: 显示音频控制面板
                loop: 循环播放
                autoplay: 自动播放，为了提升用户体验，一般禁用用户播放功能
             -->
        <audio src="./materials/media/music.mp3" controls loop autoplay muted></audio>
        <!--
            TODO 暂时没有视频地址，在今天发现网络地址也不太好找，就暂时无视频了
            视频标签:
                src: 视频网络链接，视频地址
                controller: 显示视频控制面板
                loop: 循环播放
                muted: 静音播放
                autoplay: 自动播放
        -->
        <video
                src="https://www.bilibili.com/video/BV1E5p1erEnc?t=30.5"
                controls
                loop
                muted
                autoplay
        ></video>
    </body>
</html>